<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <title>설정</title>
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="/resources/css/ionicons.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    
    	body {
    		background-color: #f8f8f8;
    		overflow-x: hidden;
		}
		.list-menu{ padding:0; list-style:none;margin:45px 0;}
		.list-menu > li { border-bottom:1px solid #ddd; width:100%; height:100%; display:block; padding:14px 12px; position:relative; cursor:pointer; background-color:#fff; white-space:nowrap; }
		.list-menu > li:first-child {border-top:1px solid #ddd;}
		.list-menu > li .menu-title{ margin-left:35px; }
		.list-menu > li .icon { font-size:24px; position:absolute; left:12px; top:8px;}
		
		.list-title{border:0;background-color:#f8f8f8!important;font-weight:bold;border-top:0!important;}
		.arrow-right{ position:absolute;right:12px;top:9px;font-size:22px;color:#888; }
		.value-right{ position:absolute;right:30px;top:12px;color:#888; }
		.value-empty-right{ position:absolute;right:12px;top:12px;color:#888; }
		.input-value{ margin-left:20px; border:0; outline:none; color:#017AFC; width:80%; }
		.radio-check{ position:absolute;right:10px;top:10px;font-size:20px;display:none; color:#666; }
		.list-menu > li.check .radio-check {display:block;}
    	
    	.subLayout{
    		width:100%;
    		position: absolute;
    		background-color: #f8f8f8;
    		top:45px;
    		left:0;
    		-webkit-transform: translate3d(100%,0,0);
    		transform: translate3d(100%,0,0);
			-webkit-transition:all 0.3s ease-in-out;
			-moz-transition:all 0.3s ease-in-out;
			-o-transition:all 0.3s ease-in-out;
			transition:all 0.3s ease-in-out;
    	}
    	.subLayout:after{
    		content: '';
    	}
    	.tabMenu{
    		margin:0;
    		padding-bottom: 0!important;
    		display: block;
    		width: 100%;
    		background-color: #fff;
    		border:1px #DFE0E4 solid;
    		border-bottom-color: #D0D1D5!important;
    		border-radius: 3px;
    		overflow:hidden;
    	}
    	.profileImageUpload{
    		position: absolute;
    		top: 0;
    		right: 0;
    		margin: 0;
    		opacity: 0;
    		-ms-filter: 'alpha(opacity=0)';
    		direction: ltr;
			cursor: pointer;
			font-size: 200px;
    	}
    	#movie-upLoadProfileImage{
			position: absolute;
			top: 0;
			cursor: move;
			z-index: 5;
			border-radius:4px;
		}
		.alert{
			width:90%;
			position: fixed;
			z-index: 1300;
			left: 5%;
			top:-55px;
			display:none;
		}
		#page {width:100%;overflow:hidden;position:relative;}
		button:focus,button:hover{outline: none;}
		.header{height:44px;background-color:#fff;border-bottom:1px solid #ddd;position:fixed;top:0;width:100%;
			padding: 0;
			-webkit-transition:all 0.3s ease-in-out;
			-moz-transition:all 0.3s ease-in-out;
			-o-transition:all 0.3s ease-in-out;
			transition:all 0.3s ease-in-out;
		}
		#home {
			-webkit-transition:all 0.3s ease-in-out;
			-moz-transition:all 0.3s ease-in-out;
			-o-transition:all 0.3s ease-in-out;
			transition:all 0.3s ease-in-out;
		}
		.center{
			-webkit-transform: translate3d(0,0,0);
    		transform: translate3d(0,0,0);
		}
		.right{
			-webkit-transform: translate3d(100%,0,0);
    		transform: translate3d(100%,0,0);
		}
		.left{
			-webkit-transform: translate3d(-100%,0,0);
    		transform: translate3d(-100%,0,0);
		}
		
		.title{width:100%;text-align:center;font-size:15px;position:absolute;top:-7px;}
		.back-btn{position:absolute;left:0;top:0;border:0;background-color:#fff;color:#017AFC;height:43px;width:50px;font-size:22px;margin-left:6px;padding:0;z-index:2;}
		.back-btn .back-title{ font-size:14px; position:relative; top:-3px; margin-left:5px; }
		.right-btn{position:absolute;right:0;top:10px;font-size:14px;border:0;background-color:#fff;display:block;color:#017AFC;font-weight:bold;z-index2;}
		.toggle{position:relative;display:inline-block;pointer-events:auto;margin:-5px;padding:5px}.toggle input:checked+.track{border-color:#4a87ee;background-color:#4a87ee}.toggle.dragging .handle{background-color:#f2f2f2!important}.toggle.toggle-light input:checked+.track{border-color:#ddd;background-color:#ddd}.toggle.toggle-stable input:checked+.track{border-color:#b2b2b2;background-color:#b2b2b2}.toggle.toggle-positive input:checked+.track{border-color:#4a87ee;background-color:#4a87ee}.toggle.toggle-calm input:checked+.track{border-color:#43cee6;background-color:#43cee6}.toggle.toggle-assertive input:checked+.track{border-color:#ef4e3a;background-color:#ef4e3a}.toggle.toggle-balanced input:checked+.track{border-color:#6c3;background-color:#6c3}.toggle.toggle-energized input:checked+.track{border-color:#f0b840;background-color:#f0b840}.toggle.toggle-royal input:checked+.track{border-color:#8a6de9;background-color:#8a6de9}.toggle.toggle-dark input:checked+.track{border-color:#444;background-color:#444}.toggle input{display:none}.toggle .track{-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background-color,border;-moz-transition-property:background-color,border;transition-property:background-color,border;display:inline-block;box-sizing:border-box;width:54px;height:32px;border:2px solid #E5E5E5;border-radius:20px;background-color:#E5E5E5;content:' ';cursor:pointer;pointer-events:none}
		.platform-android4_2 .toggle .track{-webkit-background-clip:padding-box}.toggle .handle{-webkit-transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out;position:absolute;display:block;width:28px;height:28px;border-radius:28px;background-color:#fff;top:7px;left:7px}.toggle .handle:before{position:absolute;top:-4px;left:-22px;padding:19px 35px;content:" "}.toggle input:checked+.track .handle{-webkit-transform:translate3d(22px,0,0);-moz-transform:translate3d(22px,0,0);transform:translate3d(22px,0,0);background-color:#fff}.item-toggle.active{box-shadow:none}.item-toggle,.item-toggle.item-complex .item-content{padding-right:102px}.item-toggle.item-complex{padding-right:0}.item-toggle .toggle{position:absolute;top:8px;right:16px;z-index:3}.toggle input:disabled+.track{opacity:.6}
		button[disabled], html input[disabled] {color:#cacaca;}
    </style>
</head>
<body>
<div id="page">
	<!-- header -->
	<div class="header" id="list-header">
		<h1 class="title">설정</h1>
	</div>
	<div class="header right" id="account-header">
		<button onclick="pageBack('account');" class="back-btn"><i class="ion-ios7-arrow-back"></i><span class="back-title">설정</span></button>
		<h1 class="title">계정</h1>
		<button type="button" class="right-btn" disabled="disabled" id="account-update-btn" onclick="modify(document.getElementById('account-form'), this, 'account')">저장</button>
	</div>
	<div class="header right" id="profile-header">
		<button onclick="pageBack('profile');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 설정</button>
		<h1 class="title">프로필</h1>
		<button type="button" class="right-btn" disabled="disabled" onclick="profileSave()" id="profileBtn">저장</button>
	</div>

	<!-- 1차메뉴 -->
   	<div id="home" style="padding-top: 44px;">
		<ul class="list-menu">
			<li onclick="pageSlide('account');"><i class="icon ion-person"></i><span class="menu-title">계정</span><i class="ion-ios7-arrow-forward arrow-right"></i></li>
			<c:if test="${userDto.loginApp  eq 'default'}">
				<li onclick="pageSlide('password');"><i class="icon ion-ios7-locked" style="color:#FDBD3B"></i><span class="menu-title">비밀번호</span><i class="ion-ios7-arrow-forward arrow-right"></i></li>
			</c:if>
			<li onclick="pageSlide('profile');"><i class="icon ion-ios7-compose"></i><span class="menu-title">프로필</span><i class="ion-ios7-arrow-forward arrow-right"></i></li>
			<li onclick="pageSlide('privacy');"><i class="icon ion-ios7-settings" style="color:#FDBD3B"></i><span class="menu-title">공개 범위</span><i class="ion-ios7-arrow-forward arrow-right"></i></li>
			<li onclick="pageSlide('notifications');"><i class="icon ion-ios7-bell" style="color:#FF8000"></i><span class="menu-title">알림</span><i class="ion-ios7-arrow-forward arrow-right"></i></li>
			<li onclick="pageSlide('memberLeave');"><i class="icon ion-ios7-close" style="color:#BF0000;"></i><span class="menu-title">회원탈퇴</span><i class="ion-ios7-arrow-forward arrow-right"></i></li>
		</ul>
	</div>
	
   	<!-- 계정 -->
	<div id="account" class="subLayout">
		<form id="account-form">
		<ul class="list-menu">
			<li>아이디<input type="text" class="input-value" value="${userDto.id}" id="account_id" name="account_id"></li>
			<li>이메일<input type="text" class="input-value" value="${userDto.email}" id="account_email" name="account_email"></li>
			<li>
				<label for="account_country" style="width:100%;font-weight:normal;">
					<span style="max-width:200px;width:35%;">국가</span>
					<select id="account_country" name="account_country" style="position:absolute;right:0;padding-right:25px;border:0;max-width:65%;text-indent:.01px;white-space:nowrap;direction:rtl;-webkit-appearance:none;appearance:none;text-overflow:'';">
						<option value="대한민국">대한민국</option>
						<option value="미국">미국</option>
						<option value="중국">중국</option>
						<option value="일본">일본</option>
					</select>
					<i class="caret" style="position: absolute; right:7px;color:#666;font-size:17px;top:40%;"></i>
				</label>
			</li>
			<li style="margin-top:40px;">가입날짜<span class="value-empty-right">${fn:substring(userDto.joindate,0,10)}</span></li>
			<li>마지막으로 접속한 날짜<span class="value-empty-right">${fn:substring(userDto.last_access,0,16)}</span></li>
			<li>접속횟수<span class="value-empty-right">${userDto.access_count+1}회</span></li>
		</ul>
		</form>
	</div>
	
	<!-- 비밀번호 -->
	<c:if test="${userDto.loginApp  eq 'default'}">
	<div id="password" class="subLayout">
		<div class="header">
			<button onclick="pageBack('password');" class="left-btn">aa</button>
			<h1 class="title">비밀번호</h1>
			<button type="button" class="right-btn" disabled="disabled" id="passwd-update-btn" onclick="modify(document.getElementById('passwd-form'), this, 'passwd')">저장</button>
		</div>
		<form id="passwd-form">
		<ul class="list-menu">
			<li><label for="" style="width:100%;">현재 비밀번호<br><input type="password" placeholder="현재 비밀번호를 입력해 주세요" style="border:0;padding:4px 0;background-color:#fff;width:100%;font-weight:normal;"></label></li>
			<li><label style="width:100%;">새 비밀번호<br><input type="password" placeholder="새 비밀번호를 입력해 주세요" style="border:0;padding:4px 0;background-color:#fff;width:100%;font-weight:normal;"></label></li>
			<li><label style="width:100%;">비밀번호 확인<br><input type="password" placeholder="새 비밀번호를 재입력 해주세요" style="border:0;padding:4px 0;background-color:#fff;width:100%;font-weight:normal;"></label></li>
		</ul>
		</form>
	</div>
	</c:if>
   			
	<!-- 프로필 -->
	<div id="profile" class="subLayout">
		<form action="/modifyAccounts" id="profile-form" method="post" enctype="multipart/form-data">
		<input type="hidden" id="type" name="type" value="profile">
		<ul class="list-menu">
			<li>이름<input type="text" id="profile_name" name="profile_name" class="input-value" value="${userDto.name}" style="margin-left:50px;" placeholder="별명 또는 실명을 입력해 주세요"></li>
			<li>
				<label for="profile_gender" style="width:100%;font-weight:normal;">
					<span style="max-width:200px;width:35%;">성별</span>
					<select id="profile_gender" style="position:absolute;right:0;padding-right:25px;border:0;max-width:65%;text-indent:.01px;white-space:nowrap;direction:rtl;-webkit-appearance:none;appearance:none;text-overflow:'';">
						<option value="female">여자</option>
						<option value="male">남자</option>
					</select>
					<i class="caret" style="position: absolute; right:7px;color:#666;font-size:17px;top:40%;"></i>
				</label>
			</li>
			<li>위치<input type="text" id="profile_location" name="profile_location" placeholder="현재 살고있는 도시를 입력해 주세요" class="input-value" value="${userDto.location}" style="margin-left:50px;"></li>
			<li>웹사이트<input type="text" id="profile_website" name="profile_website" placeholder="웹사이트나 블로그 주소를 입력해 주세요" class="input-value" value="${userDto.website}"></li>
			<li><textarea style="border:0;width:100%; height:100%;outline:none;resize:none;" rows="3" id="profile_description" name="profile_description" maxlength="120" placeholder="자기소개">${userDto.description}</textarea></li>
		</ul>
		
		<ul class="list-menu">
			<li class="list-title">SNS 링크</li>
			<li><img src="/resources/img/icon/share-facebook-icon.png" width="18" height="18"><input type="text" id="profile_link_facebook" name="profile_link_facebook" class="input-value" value="${userDto.link_facebook}" placeholder="페이스북 아이디를 입력해 주세요"></li>
			<li><img src="/resources/img/instagram-icon.png" width="18" height="18"><input id="profile_link_instagram" name="profile_link_instagram" type="text" class="input-value" value="${userDto.link_instagram}" placeholder="인스타그램 아이디를 입력해 주세요"></li>
			<li><img src="/resources/img/icon/share-twitter-icon.png" width="18" height="18"><input type="text" id="profile_link_twitter" name="profile_link_twitter" class="input-value" value="${userDto.link_twitter}" placeholder="트위터 아이디를 입력해 주세요"></li>
		</ul>
		
		<div style="padding:12px 12px;">
			<strong>사진</strong>
			<div style="margin-top:12px;">
				<div style="width:180px;height:180px;border:7px solid #fff;border-radius:11px;background-color:#fff;box-shadow: 1px 0px 3px rgba(0,0,0,0.2);position: relative;overflow: hidden;">
					<img src="/resources/upload/profile/thumbnail/${userDto.profileImage}" style="width:180px; height: 180px; border-radius:4px;" id="profile_image_viewer">
					<input type="file" onchange="profileImageUpload(this)" id="profile_image" name="profile_image" accept="image/*" class="profileImageUpload" >
					<input type="hidden" id="profile_imageTop" name="profile_imageTop" value="0">
					<img style="width: 180px; height: auto;" id="movie-upLoadProfileImage" src="">
				</div>
				<c:if test="${userDto.loginApp eq 'fb'}">
					<input type="hidden" id="fb_profileImage" name="fb_profileImage" value="none">
					<button type="button" class="btn btn-facebook" onclick="getFbProfileImg()" title="페이스북 사진 가져오기" style="position: relative; width: 190px; margin-top:10px;"><span style="position: absolute; left:15px; top:7px;"><i class="fa fa-facebook fa-lg"></i></span>&nbsp;페이스북 사진가져오기</button>
				</c:if>
			</div>
		</div>
		</form>
	</div>
    		
	<!-- 공개 범위 -->
	<div id="privacy" class="subLayout">
		<div class="header">
			<button onclick="pageBack('privacy');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 설정</button>
			<h1 class="title">공개범위</h1>
			<button type="button" class="right-btn" disabled="disabled" id="privacy-update-btn" onclick="modify(document.getElementById('privacy-form'), this, 'privacy')">저장</button>
		</div>
		<form id="privacy-form">
		<input type="hidden" name="privacy_follow" id="privacy_follow" value="${userDto.follow_accept}">
		<input type="hidden" name="privacy_profile" id="privacy_profile" value="${userDto.privacy}">
		<ul class="list-menu" style="border-top: 0;" id="follow-select">
			<li class="list-title">나를 팔로우 하는 사람</li>
			<li onclick="radioCheck(this,'privacy_follow',2)">누구나<i class="fa fa-check radio-check"></i></li>
			<li onclick="radioCheck(this,'privacy_follow',0)">받지않음<i class="fa fa-check radio-check"></i></li>
		</ul>
		<ul class="list-menu" style="border-top: 0;margin-top:0;" id="profile-select">	
			<li class="list-title" style="margin-top:40px;">내 프로필을 볼 수 있는사람</li>
			<li onclick="radioCheck(this,'privacy_profile',2)">누구나<i class="fa fa-check radio-check"></i></li>
			<li onclick="radioCheck(this,'privacy_profile',1)">팔로워만<i class="fa fa-check radio-check"></i></li>
			<li onclick="radioCheck(this,'privacy_profile',0)">비공개<i class="fa fa-check radio-check"></i></li>
		</ul>
		</form>
	</div>
	
   			
	<!-- 알림 -->
	<div id="notifications" class="subLayout">
		<div class="header">
			<button onclick="pageBack('notifications');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 설정</button>
			<h1 class="title">알림</h1>
		</div>
		<ul class="list-menu" style="border-top: 0;">
			<li class="list-title">받을 알림 선택</li>
			<li class="item-toggle">누군가가 나를 팔로우할때<label class="toggle toggle-positive"><input type="checkbox" checked><div class="track"><div class="handle"></div></div></label></li>
			<li class="item-toggle">누군가가 나를 언급했을때<label class="toggle toggle-positive"><input type="checkbox"><div class="track"><div class="handle"></div></div></label></li>
			<li class="item-toggle">내 게시물에 좋아요 눌렀을때<label class="toggle toggle-positive"><input type="checkbox"><div class="track"><div class="handle"></div></div></label></li>
			<li class="item-toggle">내 게시물에 댓글을 달았을때<label class="toggle toggle-positive"><input type="checkbox"><div class="track"><div class="handle"></div></div></label></li>
		</ul>
	</div>
	
	<!-- 회원탈퇴 -->
	<div id="memberLeave" class="subLayout">
		<div class="header">
			<button onclick="pageBack('memberLeave');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 설정</button>
			<h1 class="title">회원탈퇴</h1>
		</div>
		<div style="background-color:#fff;padding:25px 8px;">
			<p>Faeple에서 회원님의 계정을 영구히 삭제합니다</p>
			<abbr title="Faeple에서 회원님의 데이터가 영구히 삭제되는 항목" class="text-warning">삭제되는 항목 :</abbr>
			<ul style="margin-top:10px; padding-left:30px;">
				<li>회원님의 이름</li>
				<li>회원님의 이메일</li>
				<li>모든 개인정보가 삭제됩니다</li>
			</ul>
			<br>
			<abbr title="Faeple에서 회원님의 데이터가 보관되는 항목" class="text-warning">삭제되지 않는 항목 :</abbr>
			<ul style="margin-top:10px; padding-left:30px;">
				<li>로그 기록</li>
			</ul>
			<br>
			<p class="text-danger"><strong>회원탈퇴시 계정은 영구히 삭제되며, 복구할 수 없습니다.</strong></p>
			<button type="button" style="width:100%;background-color:#d43f3a;text-align:center;color:#fff;padding:8px 0;border:0;" title="탈퇴하기">탈퇴하기</button>
		</div>
	</div>
	<!-- 회원탈퇴 -->
</div>

<div class="modal fade" id="memberLeave-modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index:1100;">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form action="/memberLeave" method="post">
				<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
			        <h4 class="modal-title">회원탈퇴</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="leave-type">탈퇴하는 이유가 무엇인가요?</label>
						<select class="selectpicker show-tick" id="leave-type" name="leave-type" title="선택" data-width="100%">
							<option value="서비스 불만족">서비스 불만족</option>
							<option value="기능 부족">기능 부족</option>
							<option value="사용하기 어려움">사용하기 어려움</option>
							<option value="더이상 사용하지 않음">더이상 사용하지 않음</option>
							<option value="기타">기타</option>
						</select> 
					</div>
					<div class="form-group">
						<label for="leave-opinion">추가의견</label>
						<textarea id="leave-opinion" name="leave-opinion" class="form-control" rows="3" cols="250" style="resize:none;" maxlength="500"></textarea>
					</div>
				</div>
				<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
					<button type="submit" class="btn btn-primary btn-lg btn-block">탈퇴하기</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="alert alert-success" id="successAlert">
	<button type="button" onclick="$(this).parent().hide();" class="close">×</button>
	<i class='glyphicon glyphicon-ok' style='color:#5CB85C;'></i>&nbsp;<span></span>
</div>

<div class="alert alert-danger" id="failAlert">
	<button type="button" onclick="$(this).parent().hide();" class="close">×</button>
	<i class='fa fa-times' style='color:#BF0000;'></i>&nbsp;<span style="font-weight: bold;"></span>
</div>

<div class="alert alert-warning" id="warningAlert">
	<button type="button" onclick="$(this).parent().hide();" class="close">×</button>
	<i class='fa fa-exclamation' style='color:#BF0000;'></i>&nbsp;&nbsp;<span style="font-weight: bold;"></span>
</div>

<div class="alert alert-info" id="infoAlert">
	<button type="button" onclick="$(this).parent().hide();" class="close">×</button>
	<span></span>
</div>

<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/resources/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
	var home = $("#home");
	
	
	function pageSlide(id){
		home.addClass("left");
		$("#list-header").addClass("left");
    	$("#"+id).addClass("center");
    	$("#"+id+"-header").removeClass("right");
    	$("#page").css("height",$("#"+id).height()+44+"px");
    }
    
	function pageBack(id){
		home.removeClass("left");
		$("#list-header").removeClass("left");
		$("#"+id+"-header").addClass("right");
    	$("#"+id).removeClass("center");
    	$("#page").css("height","400px");
    }
	
	function radioCheck(el, id, value){
		$("#"+id).val(value);
		$(el).parent().children("li").each(function(){
			$(this).removeClass("check");
		});
		$(el).addClass("check");
		if(id == "privacy_follow" || id == "privacy_profile"){
			$("#privacy-update-btn").removeAttr("disabled","disabled");
		}
	}
    
    function profileImageUpload(input){
  		var fileList = input.files;
  		try{
      		var anyWindow = window.URL || window.webkitURL;
      		var objectUrl = anyWindow.createObjectURL(fileList[0]);
      		$("#movie-upLoadProfileImage").attr("src", objectUrl).show()
    		.load(function(){
    			if($(this).height() < 180){
    				$(this).css("height", 180);
    			}
    		});
      		window.URL.revokeObjectURL(fileList[0]);
      		$("#profileBtn").removeAttr("disabled");
      		$("#displayProfileImage").attr("src", objectUrl);
      		$("#profile_image_viewer").attr("src", objectUrl);
      		$("#fb_profileImage").val("");
  		}catch(e){
  			alertShow("fail", "현재 이용중인 인터넷브라우저로는 이미지를 업로드 할 수 없습니다.&nbsp;<a style='color:#401A19;' href='/help?'>자세히 알아보기</a>", 7000);
  		}
        
  	}
   	
   	// 숫자만 입력 가능하도록
	function onlyNumber(event) {
	    var key = window.event ? event.keyCode : event.which;    
	    if ((event.shiftKey == false) && ((key  > 47 && key  < 58) || (key  > 95 && key  < 106)
	    || key  == 35 || key  == 36 || key  == 37 || key  == 39  // 방향키 좌우,home,end  
	    || key  == 8  || key  == 46 )
	    ) {
	        return true;
	    }else {
	        return false;
	    }    
	};
   	
   	function memberLeave(){
   		if(confirm('정말로 탈퇴 하시겠습니까?')){
   			$.ajax({
			    type : "get"
			    , url : "/memberLeave"
			    , dataType : "text"
			    , timeout : 5000
			    , error : function() {
			    	alertShow("fail","다시 시도해 주세요", 2000);
			    }
			    , success : function(response) {
			    	if(response == "execute"){
			    		location.href="/logout";
			    	}else{
			    		alertShow("fail","다시 시도해 주세요", 2000);
			    	}
			    }
			});
   		}
   	}
   	
   	function checkId(id){
   		var result = "";
		if(id.length < 4){
			result = "length";
		}else{
			var data = "id="+id;
			$.ajax({
			    type : "get"
			    , url : "/checkId"
			    , data : data
			    , dataType : "text"
			    , async: false
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	
			    }
			    , success : function(response) {
			    	if(response == "true"){
			    		result = "true";
			    	}else{
			    		result = "false";
			    	}
			    }
			});
		}
		return result;
	}
   	
   	function passwdCheck(value){
   		if($("#passwd_new").val() != value){
   			$("#passwdBtn").attr("disabled","disabled");
   			alert("비밀번호를 확인해 주세요");
   		}else{
   			$("#passwdBtn").removeAttr("disabled","disabled");
   		}
   	}
   	
   	function emailCheck(email){
   		eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
   		if(eCheck.test(email)){
   			$("#accountBtn").removeAttr("disabled","disabled");
   			$("#account_email").next().empty();
   		}else{
   			$("#accountBtn").attr("disabled","disabled");
   			$("#account_email").next().html("올바른 이메일을 입력해주세요");
   		}
   	}
   	
   	function modify(form,obj, type){
   		var data = $(form).serialize()+"&type="+type;
   		if(type=="account"){
   			var result = checkId($("#account_id").val());
   			if(result == "length"){
   				alertShow("fail", "아이디를 4글자 이상으로 해주세요", 2000);
   				return false;
   			}else if(result == "false"){
   				alertShow("fail", "이미 존재하는 아이디 입니다", 2000);
   				return false;
   			}
   			eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
   	   		if(!eCheck.test($("#account_email").val())){
   	   			alertShow("fail", "올바른 형식의 이메일을 입력해주세요", 2000);
   	   			return false;
   	   		}
   		}
   		$.ajax({
		    type : "post"
		    , url : "/modifyAccounts"
		    , data : data
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alertShow("fail", "다시 시도해 주세요", 2000);
		    }
		    , success : function(response) {
		    	if(response == "execute"){
		    		alertShow("success", "변경되었습니다", 2000);
		    		$(obj).attr("disabled", "disabled").html("저장");
		    	}else if(response == "passwd"){
		    		alertShow("fail", "현재 비밀번호가 일치하지 않습니다", 2000);
		    		$(obj).removeAttr("disabled", "disabled").html("저장");
		    	}else{
		    		alertShow("fail", "다시 시도해 주세요", 2000);
		    		$(obj).removeAttr("disabled", "disabled").html("저장");
		    	}
		    }
		    , beforeSend: function() {
		    	$(obj).attr("disabled", "disabled").html("변경중...");
		    }
		});
   	}
   	
   	$(document).ready(function(){
   		var setMenu = location.href.split("#")[1];
   		if(setMenu == "account"){
   			$("#account").fadeIn(500);
   			$("#topmenu > li:nth-child(1)").addClass("active");
   		}else if(setMenu == "password"){
   			$("#password").fadeIn(500);
   			$("#topmenu > li:nth-child(2)").addClass("active");
   		}else if(setMenu == "profile"){
   			$("#profile").fadeIn(500);
   			$("#topmenu > li:nth-child(3)").addClass("active");
   		}else if(setMenu == "privacy"){
   			$("#privacy").fadeIn(500);
   			$("#topmenu > li:nth-child(4)").addClass("active");
   		}else if(setMenu == "notifications"){
   			$("#notifications").fadeIn(500);
   			$("#topmenu > li:nth-child(5)").addClass("active");
   		}else if(setMenu == "memberLeave"){
   			$("#memberLeave").fadeIn();
   			$("#topmenu > li:nth-child(6)").addClass("active");
   		}else{
   			
   		}
   		
   		$("#account-form").on("input", function(){
   			$("#account-update-btn").removeAttr("disabled","disabled");
   		});
   		$("#passwd-form").on("input", function(){
   			$("#passwd-update-btn").removeAttr("disabled","disabled");
   		});
   		$("#profile-form").on("input", function(){
   			$("#profileBtn").removeAttr("disabled","disabled");
   		});
   		
   		//account init
   		if("${userDto.country}" == "대한민국"){
   			$("#account_country option:eq(0)").attr("selected", "selected");
   		}else if("${userDto.country}" == "미국"){
   			$("#account_country option:eq(1)").attr("selected", "selected");
   		}else if("${userDto.country}" == "중국"){
   			$("#account_country option:eq(2)").attr("selected", "selected");
   		}else{
   			$("#account_country option:eq(3)").attr("selected", "selected");
   		}
   		
   		//profile init
   		if("${userDto.gender}" == "female"){
   			$("#profile_gender option:eq(0)").attr("selected", "selected");
  		}else{
  			$("#profile_gender option:eq(1)").attr("selected", "selected");
  		}
   		
   		//privacy init
   		if("${userDto.follow_accept}" == "2"){
   			$("#follow-select li").eq(1).addClass("check");
  		}else{
  			$("#follow-select li").eq(2).addClass("check");
  		}
   		if("${userDto.privacy}" == "2"){
   			$("#profile-select li").eq(1).addClass("check");
  		}else if ("${userDto.privacy}" == "1"){
  			$("#profile-select li").eq(2).addClass("check");
  		}else{
  			$("#profile-select li").eq(3).addClass("check");
  		}
   		
   		
   		$("#movie-upLoadProfileImage").draggable({
    		scroll: false,
    		axis : "y",
    		drag : function(event, ui){
    			var h = $("#movie-upLoadProfileImage").height();
    			if(ui.position.top >= 0){
    				ui.position.top = 0;
    			}else if(ui.position.top <= 180 - h){
    				ui.position.top = 180 - h;
    			}
    		},
    		stop : function(){
    			$("#profile_imageTop").val($("#movie-upLoadProfileImage").position().top);
    		}
    	});
   		
   	}); // end document
   	
   	// 프로필탭 저장
   	function profileSave() {
   		$("#profile_description").val($("#profile_description").val().replace("\n", " "));
		$.getScript('/resources/js/jquery.form.js', function(){
    		$("#profile-form").ajaxSubmit({
    			statusCode: { 400: function() {
    					alertShow("fail", "다시 시도해 주세요", 2000);
    					$("#profileBtn").removeAttr("disabled", "disabled").html("저장");
    				},
    				500: function() {
    					alertShow("fail", "다시 시도해 주세요", 2000);
    					$("#profileBtn").removeAttr("disabled", "disabled").html("저장");
    				}
    			},
    			beforeSubmit: function() { 
    				$("#profileBtn").attr("disabled", "disabled").html("변경중...");
    			},
    			success: function(data) {
    				alertShow("success", "변경되었습니다", 2000);
		    		$("#profileBtn").attr("disabled", "disabled").html("저장");
		    		$("#movie-upLoadProfileImage").hide();
    			}
    		});
		});
   	}
   	
   	// 페이스북 프로필 사진 가져오기
   	function getFbProfileImg(){
   		$("#movie-upLoadProfileImage").attr("src", "https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999");
   		$("#fb_profileImage").val("https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999");
   		$("#profileBtn").removeAttr("disabled", "disabled");
   		$("#profile_image_viewer").attr("src", "https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999");
   	}
   	
   	function alertShow(type, message, dealy){
		if(type=="success"){
			if($("#successAlert").is(":animated")) return false;
			$("#successAlert > span").html(message);
			$("#successAlert").show().animate({"top":15}).delay(dealy).animate({"top":-55},{complete:function(){$(this).hide();}});
		}else if(type=="fail"){
			if($("#failAlert").is(":animated")) return false;
			$("#failAlert > span").html("<strong>"+message+"</strong>");
			$("#failAlert").show().animate({"top":15}).delay(dealy).animate({"top":-55},{complete:function(){$(this).hide();}});
		}else if(type=="warning"){
			if($("#warningAlert").is(":animated")) return false;
			$("#warningAlert > span").html(message);
			$("#warningAlert").show().animate({"top":15}).delay(dealy).animate({"top":-55},{complete:function(){$(this).hide();}});
		}else{
			if($("#infoAlert").is(":animated")) return false;
			$("#infoAlert > span").html(message);
			$("#infoAlert").show().animate({"top":15}).delay(dealy).animate({"top":-55},{complete:function(){$(this).hide();}});
		}
	}
</script>
</body>
</html>